<template>
  <van-search
    shape="round"
    background="#4fc08d"
    placeholder="请输入搜索关键词"
    show-action
    class="home-search"
  >
    <template #left>
      <span>首页</span>
    </template>
    <template #action>
      <span>登录</span>
    </template>
  </van-search>
  <van-swipe class="my-swipe" indicator-color="white">
    <van-swipe-item v-for="(item, index) in banner" :key="item.objectId">
      <img :src="item.img" />
    </van-swipe-item>
  </van-swipe>
  <van-grid class="home-grid">
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
  </van-grid>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <Goods :list="glist" />
  </van-list>
  <div class="bottom"></div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { bannerGet } from "../../api/home";
import Goods from "../../components/goods.vue";
import { useGoodsList } from "../../hooks/goodsList";

// 轮播
interface Banner {
  img: string;
  objectId: string;
}
let banner = ref<Array<Banner>>([]);
let res = await bannerGet(); //阻塞后续代码执行
banner.value = res.data.results;
//商品列表
const { glist, finished, loading, onLoad } = await useGoodsList();
</script>

<style lang="scss" scoped>
.grid {
  display: flex;
  flex-wrap: wrap;
  .grid-item {
    width: 15rem;
    height: 50px;
    border: 1px solid red;
    box-sizing: border-box;
    font-size: 1.6rem;
  }
}
.home-search {
  span {
    color: #fff;
  }
}
/* .home-grid :deep(.van-grid-item__content) {
  background-color: red;
} */
.my-swipe {
  width: 96%;
  margin: 10px auto;
  border-radius: 6px;
  overflow: hidden;
  .van-swipe-item {
    /* background-color: #39a9ed; */
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.bottom {
  height: 80px;
}
</style>
